<template>
  <div>
    <el-card shadow="hover">
      <el-form :inline="true" :model="searchBook">
        <el-form-item label="书名：">
          <el-input v-model="searchBook.title" placeholder="请输入书名" clearable />
        </el-form-item>
        <el-form-item label="出版年份：">
          <el-input type="number" v-model="searchBook.year" placeholder="请输入出版年份" clearable />
        </el-form-item>
        <el-form-item label="作者：">
            <el-select v-model="searchBook.author" placeholder="请选择作者" clearable>
                <el-option
                  v-for="item in authorList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="search">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="openAddDialog">添加书籍</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="openDeleteBatchDialog">批量删除</el-button>
        </el-form-item>
        <el-dialog
          :close-on-click-modal="true"
          :dialogTitle="dialogTitle"
          :visible.sync="addDialog"
          width="30%"
          :before-close="handleClose"
        >
          <el-form :model="addBook" :rules="rules" ref="form">
            <el-form-item label="书名：" prop="title">
              <el-input v-model="addBook.title" placeholder="请输入书名"></el-input>
            </el-form-item>
            <el-form-item label="出版年份：" prop="year">
              <el-input v-model.number="addBook.year" placeholder="请输入出版年份"></el-input>
            </el-form-item>
            <el-form-item label="作者：">
            <el-select v-model="addBook.author" placeholder="请选择作者" clearable>
                <el-option
                  v-for="item in authorList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="addDialog = false">取 消</el-button>
            <el-button type="primary" @click="confirm">确 定</el-button>
          </span>
        </el-dialog>
      </el-form>
      <el-table
        :data="bookList"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="书名" align="center" prop="title"></el-table-column>
        <el-table-column label="出版年份" align="center" prop="year"></el-table-column>
        <el-table-column label="作者" align="center" prop="author"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="openUpdateDialog(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="openDeleteDialog(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <my-dialog :show="tipDialog" :message="tipMessage" :callBack="callBackFun" @close="closeFun" />
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
import bookApi from '../api/BookApi';
import MyDialog from './MyDialog.vue';

export default {
  name: 'book',
  props: {
    msg: String,
  },
  data() {
    return {
      bookList: [], // 当前页的所有书籍信息集合
      authorList:[],
      pageNo: 1, // 当前页
      pageSize: 5, // 每页大小
      total: 100, // 总记录数
      searchBook: {}, // 搜索条件
      dialogTitle: '', // 对话框显示的信息
      addDialog: false, // 控制添加提示框
      tipMessage: '', // 删除提示弹窗
      tipDialog: false, // 控制提示框
      addBook: {}, // 新增或修改的书籍信息
      callBackFun: {}, // 提示框中的确认回调函数
      deleteId: [], // 需要删除的id
      selectedList: [], // 已选中的书籍id
      rules: {
        title: [
          { required: true, message: '请输入书名', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' },
        ],
        year: [
          { required: true, message: '请输入出版年份', trigger: 'blur' },
          { type: 'number', message: '请输入数字值', trigger: 'blur' },
        ]
      },
    };
  },
  async created() {
    this.loadList();
    let {data} = await  bookApi.selectAllAuthor();
   this.authorList = data;
  },
  methods: {
    // 打开批量删除对话框
    openDeleteBatchDialog() {
      if (this.deleteId.length === 0) {
        this.tipMessage = '请选择要删除的书籍';
        this.tipDialog = true;
        return;
      }
      this.tipMessage = `确定要删除选中的书籍吗？`;
      this.tipDialog = true;
      this.callBackFun = this.deleteBooks;
    },
    //打开删除对话框
    openDeleteDialog(index,row){
      this.tipMessage = `确认要删除${row.title}吗？`
      this.tipDialog = true;
      this.callBackFun = this.deleteBooks;
      this.deleteId.splice(0,this.deleteId.length);
      this.deleteId.push(row.id);
    },
    // 选择信息改变
    handleSelectionChange(val){
     this.deleteId = val.map(item => item.id);     
    },
     // 打开更新对话框
     openUpdateDialog(index,data){
      this.dialogTitle = "修改图书信息";
      this.addDialog = true;
      this.addBook = data;
    },
     // 打开新增图书对话框
     openAddDialog(){
      this.dialogTitle = "新增图书信息";
      this.addDialog = true;
    },
    handleClose(){
      this.addDialog = false;
    },
    // 模糊查找
    search() {
      this.pageNo = 1;
      this.loadList();
    },
    // 修改书籍实现
    async updateBook() {
      let { data } = await bookApi.updateBook(this.addBook);
      
      this.showTips(data);
    },
    // 新增书籍实现
    async addBookFun() {
      let { data } = await bookApi.addBook(this.addBook);
      this.showTips(data);
    },
    // 删除书籍函数
    async deleteBooks() {
      let { data } = await bookApi.deleteById(this.deleteId);
      this.showTips(data);
      this.loadList();
    },
    // 对话框确认函数
    confirm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.addBook.id != null) {
            this.updateBook();
          } else {
            this.addBookFun();
          }
        } else return;
      });
    },
    // 每页大小改变时事件
    handleSizeChange(val) {
      this.pageSize = val;
      this.loadList();
    },
    // 当前页改变时事件
    handleCurrentChange(val) {
      this.pageNo = val;
      this.loadList();
    },

    // 加载数据
    async loadList() {
      let { data } = await bookApi.selectByCondition(
        this.pageNo,
        this.pageSize,
        this.searchBook
      );
      this.bookList = data.rows;
      this.total = data.total;
    },
    // 关闭提示框
    closeFun(val) {
      this.tipDialog = val;
    },
    // 显示后端相应信息
    showTips(data) {
      if (data.code === 200) {
        this.$message({
          type: 'success',
          message: data.data,
          onClose: () => {
            this.loadList();
            this.addDialog = false;
          },
        });
        this.addBook = {};
      } else {
        this.$message({
          type: 'error',
          message: data.data,
          onClose: () => {
            this.loadList();
            this.addDialog = false;
          },
        });
      }
    },
  },
  components: {
    MyDialog,
  },
};
</script>

<style>
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>